import React from 'react';
import './index.less';
import ToDoListTitle from '../ToDoListTitle';
import ToDoListItem from '../ToDoListItem';

class ToDoList extends React.Component {
  render() {
    const {unFinalList,finalList,updateItem,deleteItem,updateName,checkItemNameSame} = this.props;
    return (
        <div className='todoList'>
          <div className='content-center'>
            <ToDoListTitle listTitle = '正在进行' count={unFinalList.length}/>
            <div className='item-container'>
            {
              unFinalList.map( item =>{
                return <ToDoListItem key={item.id} {...item} updateItem={updateItem} deleteItem={deleteItem} updateName={updateName} checkItemNameSame={checkItemNameSame}/>
              })
				    }
            </div>
          </div>
          <div className='content-bottom'>
            <ToDoListTitle listTitle = '已经完成' count={finalList.length}/>
            <div className='item-container'>
            {
              finalList.map( item =>{
                return <ToDoListItem key={item.id} {...item} updateItem={updateItem} deleteItem={deleteItem} updateName={updateName} checkItemNameSame={checkItemNameSame}/>
              })
				    }
            </div>
          </div>
        </div>
    );
  }
}

export default ToDoList;
